<template>
    <div :style="{height: wrapperHeight,'width':'100%'}">
      <div style="float: left;height: 100%;width:30%;overflow-y: hidden}" >
        <yfu-tree :param="param" v-on:nodeClick="nodeClick"  ref="yfuTreeDiv"> </yfu-tree>
      </div>

      <div style=" float: left; margin-left: 40px;height:95%;width:40%;">
        <div>
          <el-button class="tool_button" @click="clickNewButton" type="primary" size="mini" icon="el-icon-plus" plain v-show="permissions.indexOf('fmPermissionAdd')>0">新建权限</el-button>
          <el-button class="tool_button" @click="clickEditButton" type="primary" size="mini" icon="el-icon-edit" plain  v-show="permissions.indexOf('fmPermissionUpdate')>0">编辑权限</el-button>
          <el-button class="tool_button" @click="clickDeleteButton" type="danger" size="mini" icon="el-icon-delete" plain  v-show="permissions.indexOf('fmPermissionDelete')>0">删除权限</el-button>
          <el-button class="tool_button" @click="clickRefreshButton" type="info" size="mini" icon="el-icon-refresh" plain>刷新</el-button>
        </div>
        <div style="height:100%">
          <yfu-form :formParam="formParam" ref="yfuFormDiv" v-on:saveFormSuccess="saveFormSuccess" v-show="editForm">
          </yfu-form>
          <yfu-form :formParam="formParamAdd" ref="yfuFormDivAdd" v-on:saveFormSuccess="saveFormSuccess" v-show="addForm">
          </yfu-form>
          <div style="width:90%">
            <el-button class="tool_button" @click="clickSaveButton" type="primary" size="mini" icon="el-icon-tickets" plain style="float:right" :disabled="buttonDisable">保存</el-button>
          </div>

        </div>
      </div>
    </div>
</template>

<script>
  import { permissionTreeRemote, savePermissionRemote, updatePermissionRemote, deletePermissionRemote } from '@/view/api/permissionManager.js'
  import {getModuleMenuRemote} from '@/view/api/moduleManager.js'
  import {yfuErrorToast, yfuSuccessToast, yfuConfirm} from '@/utils/yfuMessage.js'
  import {yfuPost} from '@/utils/request.js'
  import {copyObject} from '@/utils/ArrayUtils.js'
  import getPermissionByMenuId from '@/utils/MenuPermissionUtils.js'
  export default {
    data () {
      return {
        menuId: this.$route.query.id,
        editForm: true,
        addForm: false,
        buttonDisable: true,
        permissions: '',
        // 0 为普通状态， 1为新增中， 2为编辑中
        status: 0,
        treeSelect: 0,
        wrapperHeight: '',
        param: {
          defaultProps: {
            children: 'children',
            label: 'permissionName'
          },
          showSearch: true,
          baseURL: process.env.BASE_API,
          url: permissionTreeRemote.url,
          showCheckBox: false,
          width: '90%',
          height: '100%'
        },
        formParam: {
          baseURL: process.env.BASE_API,
          url: updatePermissionRemote.url,
          items: [
            {
              prop: 'parentId',
              label: '父权限ID',
              type: 'input',
              rules: {required: true},
              display: 'displayNone'
            },
            {
              prop: 'parentName',
              label: '父权限',
              type: 'inputDisabled'
            },
            {
              prop: 'permissionName',
              label: '权限名称',
              type: 'input',
              rules: {required: true, max: 50, min: 3, type: 'nameBadCharactor'}
            }, {
              prop: 'permissionCode',
              label: '权限编码',
              type: 'inputDisabled'
            }, {
              prop: 'permissionUri',
              label: '权限uri',
              type: 'inputDisabled'
            }, {
              prop: 'url',
              label: '权限路径',
              type: 'input',
              rules: {required: true, max: 100, min: 3}
            },
            {
              prop: 'moduleId',
              label: '模块名称',
              rules: {required: true},
              type: 'selectsearch',
              valueName: 'id',
              labelName: 'moduleName',
              url: getModuleMenuRemote.url,
              options: []
            },
            {
              prop: 'permissionType',
              label: '权限类型',
              type: 'inputnumber',
              min: 1,
              max: 20
            },
            {
              prop: 'isMenu',
              label: '是否菜单',
              type: 'radio',
              labelName: 'label',
              rules: {required: true},
              options: [{
                id: 1,
                label: '是'
              }, {
                id: 0,
                label: '否'
              }]
            }
          ]
        },
        formParamAdd: {
          baseURL: process.env.BASE_API,
          url: savePermissionRemote.url,
          items: [
            {
              prop: 'parentId',
              label: '父权限ID',
              type: 'input',
              rules: {required: true},
              display: 'displayNone'
            },
            {
              prop: 'parentName',
              label: '父权限',
              type: 'inputDisabled'
            },
            {
              prop: 'permissionName',
              label: '权限名称',
              type: 'input',
              rules: {required: true, max: 50, min: 3, type: 'nameBadCharactor'}
            }, {
              prop: 'permissionCode',
              label: '权限编码',
              type: 'input',
              rules: {required: true, max: 50, min: 3, type: 'nameBadCharactor'}
            }, {
              prop: 'permissionUri',
              label: '权限uri',
              type: 'input',
              rules: { required: true, max: 50, min: 10 }
            }, {
              prop: 'url',
              label: '权限路径',
              type: 'input',
              rules: {required: true, max: 100, min: 3}
            },
            {
              prop: 'moduleId',
              label: '模块名称',
              rules: {required: true},
              type: 'selectsearch',
              valueName: 'id',
              labelName: 'moduleName',
              url: getModuleMenuRemote.url,
              options: []
            },
            {
              prop: 'permissionType',
              label: '权限类型',
              type: 'inputnumber',
              min: 1,
              max: 20
            },
            {
              prop: 'isMenu',
              label: '是否菜单',
              type: 'radio',
              labelName: 'label',
              rules: {required: true},
              options: [{
                id: 1,
                label: '是'
              }, {
                id: 0,
                label: '否'
              }]
            }
          ]
        }
      }
    },
    created () {
      let cThis = this

      let allHeight = document.documentElement.clientHeight
      this.wrapperHeight = (allHeight - 140) + 'px'
//      this.param.height = allHeight - 140 + 'px'

      getPermissionByMenuId(this.sessiongetJSON('user').id, this.menuId, function (permissionString) {
        cThis.permissions = permissionString
      })
    },
    mounted () {
      this.$refs.yfuFormDiv.disabledForm()
    },
    methods: {
      nodeClick (data) {
        this.treeSelect = data.id
        let item = {}
        copyObject(item, data)
//          {
//          parentId: 1,
//          parentName: '一级权限',
//          permissionName: '二级权限',
//          permissionUrl: '/path',
//          permissionModule: 1,
//          permissionType: 'fds',
//          permissionIsMenu: 1
//        }
        this.addForm = false
        this.editForm = true
        this.$refs.yfuFormDiv.assignForm(item)
        this.$refs.yfuFormDiv.disabledForm()
        this.statusChange(0)
        this.buttonDisable = true
      },
      refreshTree () {
        this.addForm = false
        this.editForm = true
        this.$refs.yfuTreeDiv.refresh()
        this.statusChange(0)
        this.$refs.yfuFormDiv.disabledForm()
        this.buttonDisable = true
        this.treeSelect = -1
      },
      // 新建
      clickNewButton () {
        if (this.status === 0) {
          if (this.treeSelect > 0) {
            this.editForm = false
            this.addForm = true
            let node = this.$refs.yfuTreeDiv.getCurrentNode()
            let item = {}
            item.parentId = node.id
            item.parentName = node.permissionName
            this.$refs.yfuFormDivAdd.assignForm(item)
            this.statusChange(1)
//            this.$refs.yfuFormDiv.modifyUrl(savePermissionRemote.url)
            this.buttonDisable = false
          } else {
            yfuErrorToast('新增时，必须选中父节点')
          }
        } else {
          yfuErrorToast('修改中，不能新增')
        }
      },
      // 编辑
      clickEditButton (row) {
        if (this.treeSelect <= 0) {
          yfuErrorToast('修改时，必须选中节点')
          return
        }
        if (this.status === 1) {
          yfuErrorToast('正在新增中，不能编辑')
          return
        }
        this.editForm = true
        this.addForm = false
//        let node = this.$refs.yfuTreeDiv.getCurrentNode()
        this.$refs.yfuFormDiv.editForm()
//        this.$refs.yfuFormDiv.assignForm(node)
//        this.$refs.yfuFormDiv.modifyUrl(updatePermissionRemote.url)
        this.statusChange(2)
        this.buttonDisable = false
      },
      // 删除
      clickDeleteButton () {
        let cThis = this
        if (this.status === 2) {
          yfuErrorToast('正在编辑中，不能删除')
          return
        }
        if (this.status === 1) {
          yfuErrorToast('正在新增中，不能删除')
          return
        }
        if (this.treeSelect > 0) {
          yfuConfirm('是否删除权限？', () => {
            let param = {}
            param.ids = this.treeSelect
            yfuPost(process.env.BASE_API, deletePermissionRemote.url, param, function () {
              // 删除逻辑
              yfuSuccessToast('删除成功')
              cThis.refreshTree()
            })
          })
        } else {
          yfuErrorToast('请选中一行')
        }
      },
      // 刷新
      clickRefreshButton () {
        this.refreshTree()
      },
      // 保存
      clickSaveButton () {
        if (this.editForm) {
          this.$refs.yfuFormDiv.submit()
        } else {
          this.$refs.yfuFormDivAdd.submit()
        }
      },
      saveFormSuccess (data) {
        yfuSuccessToast('保存成功')
        this.refreshTree()
      },
      statusChange (statusitem) {
        this.status = statusitem
      }
    }
  }
</script>
